<template>
	<view>
		<!-- 默认地址 -->
		<view class="address" v-if="data.is_pad">
			<navigator hover-class="false" class="none" v-if="!address.unid"  url="../shopStore/address">
				<i class="iconfont iconxinjianbijibenjiahao"></i>
				<text>新增收货地址</text>
			</navigator>
			<view class="default" v-else>
				<view class="default-left">
					<view class="default-info">{{address.user_name}}<text>{{address.phone}}</text></view>
					<view>{{address.address}}</view>
				</view>
				<navigator hover-class="false" class="default-right" url="../shopStore/address">
					<i class="iconfont iconfanhui"></i>
				</navigator>
			</view>
		</view>
		<!-- 商品信息 -->
		<view class="good">
			<view class="good-left">
				<image :src="data.charge_image"></image>
			</view>
			<view class="good-right">
				<view class="good-right-name">{{data.member_card_name}}<span v-if="data.is_pad">+智学星</span></view>
				<view class="good-right-price">￥{{data.charge_cion}}</view>
			</view>
		</view>
		<view class="leave">
			<view class="leave_name">买家留言:</view>
			<input type="text" v-model="leave"  placeholder="请输入给卖家的留言" placeholder-style="color:#999999;font-size:30upx;" />
		</view>
		<!-- 支付信息 -->
		<view class="info">
			<view v-if="data.is_pad"><label>商品金额：</label><text>￥{{data.pad_cion}}</text></view>
			<view v-else><label>商品金额：</label><text>￥{{data.charge_cion}}</text></view>
			<view v-if="data.activity_start_time<date&&data.activity_end_time>date &&data.activity_cion!=0" ><label>优惠金额：</label><text>-￥{{data.activity_cion}}</text></view>
			<view v-if="dis_price!=0"><label>会员卡折现</label><text>-￥{{dis_price}}</text></view>
			<!-- <view class="info-freight"><label>运费</label><text>￥0</text></view> -->
			<!-- <view><label>积分抵扣</label><text>{{detail.score*goodNum}}</text></view> -->
			<view class="allcion">
				<label>实付金额：</label>
				<text>￥{{total_price}}</text>
			</view>
		</view>
		<view class="pay_lable" @click="show">
			支付说明
		</view>
		
		<view class="bg" v-if="isshow">
			<view class="label">
				<view class="title">支付说明：</view>
				<view>
					<text>
						1.要购买的会员卡与已购会员卡相同则为续费；
					</text>
					<text>
						2.要购买的会员卡高于已购的会员卡时，则计算并减去余额再付款；付款后会员卡直接立即升级；原有会员卡时效不变；
					</text>
					<text>3.要购买的会员卡等级低于已购会员卡，则已购会员卡到期后，等级降到此次购买的会员卡等级</text>
				</view>
				<view class="label_btn" @click="show">
					确认
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="bottom">
			<label>实付金额：￥{{total_price}}</label>
			<view :class="!address.unid && data.is_pad ? 'bottom-pay bottom-pay-none':'bottom-pay'" @click="pay">立即支付</view>
		</view>
		<!-- 支付组件 -->
		<pay-popuper ref="popuper" :realPay="total_price" @pay_order="pay_order" ></pay-popuper>
	</view>
</template>

<script>
	import payPopuper from './components/pay-popuper'	
	export default {
		components: {
			payPopuper
		},
		data() {
			return {
				address: {}, //默认收货地址
				data:'',
				date:0,
				leave:'',
				isshow:false,
				Childinfo:uni.getStorageSync('currentChild'),
				total_price:0,
				dis_price:0,
			}
		},
		onLoad(e) {
			this.data=JSON.parse(decodeURIComponent(e.data));
			this.date = parseInt(+new Date()/1000);
			/* 默认会员卡价格 */
			var charge_all_cion = Number(this.data['charge_cion']);
			/* 购买pad卡价格 */
			if(this.data.is_pad){
				charge_all_cion = Number(this.data['pad_cion']);
			}
			/* 是否在活动期间 */
			 if(this.data['activity_start_time']<this.date&&this.date<this.data['activity_end_time']){
				 charge_all_cion = charge_all_cion - Number(this.data['activity_cion']);
			 }
			 /* 是否存在会员没过期*/
			if(this.Childinfo['closing_date']-this.date>86400&&this.data['unid'] != this.Childinfo['member_card_id']){
			  var remaining_days  = parseInt((this.Childinfo['closing_date']-this.date)/86400);
			  var remaining_coin  = parseInt(this.Childinfo['charge_cion']/this.Childinfo['member_card_day_num']);
			  this.dis_price 	  = remaining_days*remaining_coin;
			  charge_all_cion = charge_all_cion - (remaining_days*remaining_coin)>0?charge_all_cion - (remaining_days*remaining_coin):0;
			}
			this.total_price = charge_all_cion;
			this.getArea();
		},
		methods: {
			show:function(){
				this.isshow=!this.isshow
			},
			pay(){
				if(this.data['is_pad']){
					if(!this.address.unid){
						uni.showToast({
							title: '请添加收货地址',
							icon:'none'
						});
						return;
					}
				}
				var data={};
				this.$refs.popuper.goPay(data);
			},
			pay_order:function(e){
				var _this =this;
				var Data = {
					member_card_id:this.data['unid'],
					pay_type:e.payType,
					is_df:2,
					stu_id:this.Childinfo.student_id
				}
				if(this.data['is_pad']){
					Data['is_pad'] = 1;
					Data['phone'] = this.address['phone'];
					Data['name'] = this.address['user_name'];
					Data['address'] = this.address['pre_address']+this.address['address'];
				}
				if(this.data['is_remind']){
					Data['member_remind'] = 1;
				}
				if(this.leave){
					Data['pad_describe'] = this.leave;
				}
				if(this.data['subject_num']!=0){
					Data['subject_string'] = this.data['subject'].join(',');
				}
	
				this.$mapi.apiPost('api/v1/mobile/member/card/order/save',Data).then(res=>{
					var resultdata = res.data;
					var data={
						total_price:_this.total_price,
						charge_order_sn:resultdata.data.charge_order_sn,
						unid:resultdata.data.unid,
						enddate:_this.data.enddate
					};
					if(resultdata.code==210){
						uni.redirectTo({
							url: 'paysuccess?data='+encodeURIComponent(JSON.stringify(data))
						})
					}else{
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: resultdata.data,
							success: e => {
							uni.showToast({
								title: "支付成功",
								complete() {
									setTimeout(a=>{
										uni.redirectTo({
											url: 'paysuccess?data='+encodeURIComponent(JSON.stringify(data))
										})
									},800)
								}
							})
							},
							fail: e => {
								if(/canceled/.test(e.errMsg)){
									uni.showToast({
										title: "用户取消支付",
										icon: "none"
									})								
								} else {
									uni.showModal({
										content: '支付失败,原因为: ' + e.errMsg,
										showCancel: false
									});								
								}
							}
						});
					}
				});
				
			},
			// 查询默认地址
			getArea() {
				this.$sapi.apiPost('v1/' + this.market_id + '/mobile/address/infos', {
					default: 1
				}).then(res => {
					if (res.data.code == 200 && res.data.data.length > 0) {
						this.address = res.data.data[0];
						console.log(this.address);
					} else {
						this.address = {};
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FAFAFA;
	}

	// .address,
	// .good,
	// .info {
	// 	margin: 0upx 30upx 30upx;
	// 	background-color: #FFFFFF;
	// 	padding: 26upx 30upx;
	// 	border-radius: 20upx;
	// }

	/* 默认地址 */
	.address {
		background-color: #FFFFFF;
		padding: 30upx;
		margin-bottom: 20upx;
		.none {
			display: flex;
			align-items: center;
			justify-content: start;

			i {
				color: #333333;
				font-size: 70upx;
				line-height: 1;
				margin-right: 10upx;
				color: #FF9900;
			}

			text {
				color: #333333;
				font-size: 30upx;
				font-weight: 500;
			}
		}

		.default {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.default-left {
				width: 92%;

				.default-info {
					color: #333333;
					font-size: 30upx;
					display: flex;
					align-items: center;

					text {
						color: #A8A8A8;
						margin-left: 10upx;
					}
				}
			}

			.default-right {
				color: #A8A8A8;
				font-size: 20upx;
			}
		}
	}

	/* 商品信息 */
	.good {
		display: flex;
		padding: 30upx;
		background-color: #FFFFFF;
		margin-bottom: 20upx;
		.good-left {
			height: 160upx;
			width: 240upx;
			border-radius: 15upx;
			margin-right: 20upx;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}

		.good-right {
			width: calc(100% - 150upx);
			
			.good-right-name {
				color: #333333;
				font-size: 34upx;
				font-weight: 500;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.good-right-price {
				color: #333333;
				font-size: 32upx;
				font-weight: 500;
				span {
					font-size: 50upx;
					font-weight: 500;
					margin-right: 8upx;
				}
			}
		}
	}
	
	.leave{
		padding: 30upx;
		background-color: #FFFFFF;
		margin-bottom: 20upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.leave_name{
			margin-right: 10upx;
			font-size: 34upx;
			color: #333333;
		}
	}

	/* 支付信息 */
	.info {
		padding: 30upx;
		background-color: #FFFFFF;
		view {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 15upx;

			label {
				color: #333333;
				font-size: 34upx;
			}

			text {
				color: #333333;
			}
		}
		.allcion{
			width: 690upx;
			margin: auto;
			border-top: 1upx solid #E5E5E5 ;
			padding: 10upx 0upx;
			text {
				color: #FF0000;
			}
		}
		.info-freight {
			text {
				color: #333333;
			}
		}
	}

	/* 底部 */
	.bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100upx;
		background-color: #FFFFFF;
		box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.16);
		color: #333333;
		font-size: 34upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		label{
			margin-left: 30upx;
		}

		.bottom-pay {
			color: #FFFFFF;
			padding: 0 50upx;
			background-color: #FFB800;
			line-height: 100upx;
			font-size: 34upx;
		}
		.bottom-pay-none{
			background-color: #CCCCCC;
		}
	}
	.pay_lable{
		text-decoration:underline;
		color: #FF9900;
		position: fixed;
		right: 30upx;
		bottom: 120upx;
	}
	.bg{
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 999;
		top: 0;
		background:rgba(0,0,0,.4);
		.label{
			position: relative;
			top: 220upx;
			width: 566upx;
			border-radius: 12upx;
			background: #fff;
			margin: auto;
			.title{
				width: 92%;
				margin: auto;
				font-size: 34upx;
				padding-top: 40upx;
			}
			text{
				line-height: 45upx;
				width: 92%;
				margin: auto;
				margin-top: 15upx;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				color: #999999;
				font-size: 30upx;
			}
			.label_btn{
				width: 100%;
				height: 100upx;
				text-align: center;
				line-height: 100upx;
				font-size: 32upx;
				color:#FF9900;
				margin-top: 40rpx;
	
			}
		}
		}
</style>
